{% extends 'base.html' %}

{% block title %}Server Error | TaskFlow{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8 text-center">
            <h1 class="display-1 text-danger">500</h1>
            <h2 class="mb-4">Server Error</h2>
            <p class="lead">Oops! Something went wrong on our end.</p>
            <p>We're experiencing some technical difficulties. Our team has been notified and we're working to fix this issue.</p>
            <div class="mt-4">
                <a href="{% url 'home' %}" class="btn btn-primary">
                    <i class="fas fa-home me-2"></i>Return to Homepage
                </a>
                <a href="{% url 'contact' %}" class="btn btn-outline-secondary ms-2">
                    <i class="fas fa-envelope me-2"></i>Contact Support
                </a>
            </div>
            {% if request.sentry.event_id %}
            <div class="mt-4">
                <p class="text-muted small">
                    Error ID: {{ request.sentry.event_id }}
                </p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    body {
        background-color: #f8f9fa;
    }
    .display-1 {
        font-size: 8rem;
        font-weight: 700;
    }
</style>
{% endblock %}